<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #top {
            padding: 20px;
        }

        #bottom {
            position: relative;
        }

        #bottom > div {
            width: 220px;
            height: 360px;
            /*background-color: red;*/
        }
    </style>

</head>
<body>
<div id="top">
    <button>每行3个</button>
    <button>每行4个</button>
    <button>每行5个</button>
</div>
<div id="bottom">
    <div>
        <img src="image/1.jpg" alt="">
        <p>因为遇见你</p>
        <p>孙怡邓伦牵手演绎刺绣奇缘</p>
    </div>
    <div>
        <img src="image/2.jpg" alt="">
        <p>因为遇见你</p>
        <p>孙怡邓伦牵手演绎刺绣奇缘</p>
    </div>
    <div>
        <img src="image/3.jpg" alt="">
        <p>因为遇见你</p>
        <p>孙怡邓伦牵手演绎刺绣奇缘</p>
    </div>
    <div>
        <img src="image/4.jpg" alt="">
        <p>因为遇见你</p>
        <p>孙怡邓伦牵手演绎刺绣奇缘</p>
    </div>
    <div>
        <img src="image/5.jpg" alt="">
        <p>因为遇见你</p>
        <p>孙怡邓伦牵手演绎刺绣奇缘</p>
    </div>
    <div>
        <img src="image/6.jpg" alt="">
        <p>因为遇见你</p>
        <p>孙怡邓伦牵手演绎刺绣奇缘</p>
    </div>
    <div>
        <img src="image/7.jpg" alt="">
        <p>因为遇见你</p>
        <p>孙怡邓伦牵手演绎刺绣奇缘</p>
    </div>
    <div>
        <img src="image/8.jpg" alt="">
        <p>因为遇见你</p>
        <p>孙怡邓伦牵手演绎刺绣奇缘</p>
    </div>
    <div>
        <img src="image/9.jpg" alt="">
        <p>因为遇见你</p>
        <p>孙怡邓伦牵手演绎刺绣奇缘</p>
    </div>
    <div>
        <img src="image/10.jpg" alt="">
        <p>因为遇见你</p>
        <p>孙怡邓伦牵手演绎刺绣奇缘</p>
    </div>
    <div>
        <img src="image/11.jpg" alt="">
        <p>因为遇见你</p>
        <p>孙怡邓伦牵手演绎刺绣奇缘</p>
    </div>
    <div>
        <img src="image/12.jpg" alt="">
        <p>因为遇见你</p>
        <p>孙怡邓伦牵手演绎刺绣奇缘</p>
    </div>
    <div>
        <img src="image/13.jpg" alt="">
        <p>因为遇见你</p>
        <p>孙怡邓伦牵手演绎刺绣奇缘</p>
    </div>
    <div>
        <img src="image/14.jpg" alt="">
        <p>因为遇见你</p>
        <p>孙怡邓伦牵手演绎刺绣奇缘</p>
    </div>
    <div>
        <img src="image/15.jpg" alt="">
        <p>因为遇见你</p>
        <p>孙怡邓伦牵手演绎刺绣奇缘</p>
    </div>
</div>

    <script>
        window.onload = function () {
            var top = document.getElementById('top');
                top.children[0].onclick = function () {
                    sss('bottom',3);
                };
                top.children[1].onclick = function () {
                    sss('bottom',4);
                };
                top.children[2].onclick = function () {
                    sss('bottom',5);
                };
            /**
             *
             * @param [string] element
             * @param [number] cols
             */
            
            function sss(element,cols){
                if(typeof element !='string' ||typeof cols !='number'){
                    console.error('传入参数类型有误');
                    return;
                }

                var bottom = document.getElementById(element);

                var width = 220,
//                    cols = 3,
                    height = 360,
                    mariginvh =10;
                for(var i= 0;i<bottom.children.length;i++){
                    var row = parseInt(i/cols);//获取行  /
                    var col = parseInt(i%cols);//获取列 %
                    bottom.children[i].style.position = 'absolute';
                    bottom.children[i].style.top=row*(height+mariginvh)+'px';
                    bottom.children[i].style.left=col*(width+mariginvh)+'px';
                }
             }
        }
    </script>
</body>
</html>